<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>点击，事件处理连接阻止跳转，preventDefault：{{msg}}</h2>
        <p>
            vue 中的事件修饰符：
            -  prevent：阻止默认事件
            -  stop：阻止事件冒泡
            -  once：事件只触发一次
            -  capture：
            -  self
            -  passive：事件的默认行为立即执行，无需等待事件回调执行完毕。
            （@scroll（滚动），@wheel（鼠标滑轮次数））
        </p>
        <a href="https://www.baidu.com" v-on:click="showinfo">来点我啊</a>
        <a href="https://www.baidu.com" @click.prevent="showinfo">来点我啊prevent</a>
        <p>事件冒泡</p>
        <div class="demo1" @click="showinfo">
            
            <button @click.stop="showinfo">来点我啊</button>
        </div>
        <hr>
        <p>事件只触发一次</p>
        <button @click.once="showinfo">来点我啊</button>
    </div>


    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    msg: "你怎么敢的呀！"
                }
            },
            // 事件回调
            methods:{
                showinfo(event){
                    console.log(event.target.innerText)
                    alert("你怎么敢的呀。")
                    // 阻止a标签的默认跳转行为。
                    // event.preventDefault();
                },
            },
        })
    </script>
</body>
</html>